<template>
  <div class="settings-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>{{ pageTitle }}</h2>
      <p>{{ pageDescription }}</p>
    </div>
    
    <!-- 设置主体 -->
    <div class="settings-body">
      <!-- 设置导航 -->
      <div class="settings-nav">
        <Button 
          v-for="tab in tabs" 
          :key="tab.id"
          :type="activeTab === tab.id ? 'primary' : 'default'"
          @click="setActiveTab(tab.id)"
          class="w-full justify-start mb-2"
        >
          <span :class="tab.icon" class="mr-2"></span>
          {{ tab.label }}
        </Button>
      </div>
      
      <!-- 设置内容 -->
      <div class="settings-content">
      <!-- 基础设置 -->
      <div v-if="activeTab === 'general'" class="settings-section">
        <h3>{{ t('settings.generalSettings') }}</h3>
        
        <!-- 语言设置 -->
        <div class="setting-group">
          <h4>{{ t('settings.language') }}</h4>
          <div class="language-selector">
            <label for="language-select">{{ t('settings.selectLanguage') }}:</label>
            <Dropdown
              id="language-select"
              v-model="selectedLanguage"
              :options="languageOptions"
              optionLabel="name"
              optionValue="locale"
              @change="onLanguageChange"
              class="w-full md:w-64"
            />
          </div>
        </div>
      </div>
      
      <!-- 主题设置 -->
      <div v-else-if="activeTab === 'theme'" class="settings-section">
        <h3>{{ t('settings.themeSettings') }}</h3>
        <ThemeSettings />
      </div>
      
      <!-- 个人信息设置 -->
      <div v-else-if="activeTab === 'profile'" class="settings-section">
        <h3>{{ t('settings.profileSettings') }}</h3>
        
        <!-- 表单样式 -->
        <div class="profile-form">
          <div class="form-group">
            <label for="username">{{ t('login.username') }}:</label>
            <InputText id="username" v-model="userInfo.username" disabled />
          </div>
          
          <div class="form-group">
            <label for="nickname">{{ t('user.nickname') }}:</label>
            <InputText id="nickname" v-model="userInfo.nickname" />
          </div>
          
          <div class="form-group">
            <label for="email">{{ t('user.email') }}:</label>
            <InputText id="email" v-model="userInfo.email" type="email" />
          </div>
          
          <div class="form-group">
            <label for="phone">{{ t('user.phone') }}:</label>
            <InputText id="phone" v-model="userInfo.phone" />
          </div>
          
          <div class="form-actions">
            <Button type="primary" @click="saveProfile">{{ t('common.save') }}</Button>
            <Button @click="cancelEdit">{{ t('common.cancel') }}</Button>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useI18nStore } from '../../store/modules/i18n'
import { useUserStore } from '../../store/modules/user'
import { t } from '../../i18n'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import Dropdown from 'primevue/dropdown'
import ThemeSettings from '../../components/ThemeSettings.vue'

// 使用store和路由
const i18nStore = useI18nStore()
const userStore = useUserStore()
const route = useRoute()

// 动态标题
const pageTitle = computed(() => {
  if (route.path === '/profile') {
    return t('user.userInfo')
  }
  return t('settings.pageTitle')
})

const pageDescription = computed(() => {
  if (route.path === '/profile') {
    return t('user.accountSettings')
  }
  return t('settings.pageDescription')
})

// 选项卡
const activeTab = ref('general')
const tabs = [
  { id: 'general', label: t('settings.generalSettings'), icon: 'pi pi-cog' },
  { id: 'theme', label: t('settings.themeSettings'), icon: 'pi pi-palette' },
  { id: 'profile', label: t('settings.profileSettings'), icon: 'pi pi-user' }
]

// 语言设置
const selectedLanguage = computed({
  get: () => i18nStore.currentLocale,
  set: (value) => i18nStore.setLocale(value)
})

const languageOptions = computed(() => {
  return Object.values(i18nStore.languages)
})

// 用户信息
const userInfo = reactive({ ...userStore.userInfo })
const originalUserInfo = { ...userStore.userInfo }

// 设置激活选项卡
const setActiveTab = (tabId: string) => {
  activeTab.value = tabId
}

// 语言切换处理
const onLanguageChange = (event: any) => {
  i18nStore.setLocale(event.value)
}

// 保存个人信息
const saveProfile = () => {
  // 在实际应用中，这里应该调用API保存用户信息
  userStore.updateUserInfo(userInfo)
  alert(t('common.success'))
}

// 取消编辑
const cancelEdit = () => {
  Object.assign(userInfo, originalUserInfo)
}

// 初始化
onMounted(() => {
  // 根据路由设置默认激活的选项卡
  if (route.path === '/profile') {
    activeTab.value = 'profile'
  } else if (route.path === '/settings') {
    activeTab.value = 'general'
  }
})
</script>

<style scoped>
.settings-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-header {
  padding: 20px 24px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.page-header h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.settings-body {
  display: flex;
  gap: 24px;
  padding: 24px;
  flex: 1;
  overflow: auto;
}

.settings-nav {
  flex: 0 0 200px;
}

.settings-content {
  flex: 1;
}

.settings-section {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.settings-section h3 {
  margin-bottom: 20px;
  color: #333;
}

.setting-group {
  margin-bottom: 24px;
}

.setting-group h4 {
  margin-bottom: 12px;
  color: #666;
  font-size: 16px;
}

.language-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.profile-form {
  max-width: 600px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .settings-page {
    flex-direction: column;
    padding: 16px;
  }
  
  .settings-nav {
    flex: 1;
    margin-top: 80px;
  }
  
  .settings-content {
    margin-top: 16px;
  }
}
</style>